<template>
    <div class = "option-range">
      <div> △ </div>
      <div class = "rangValue"> {{value}} </div>
      <div> ▽ </div>
      <div> {{range}} </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        selectRange: []
      }
    },
    computed: {
      value: function () {
        if (this.rangeObj.length === 0) {
          return
        }

        let _obj = this.rangeObj[this.index]
        return _obj.value
      },
      range: function () {
        if (this.rangeObj.length === 0) {
          return
        }
        switch (this.index) {
          case 0: {
            this.selectRange[0] = 5
            this.selectRange[1] = this.rangeObj[1].value - 1
          } break

          case 1: {
            this.selectRange[0] = this.rangeObj[0].value + 1
            this.selectRange[1] = 19
          } break

          case 3: {
            this.selectRange[0] = 21
            this.selectRange[1] = this.rangeObj[4].value - 1
          } break

          case 4: {
            this.selectRange[0] = this.rangeObj[3].value + 1
            this.selectRange[1] = 199
          } break

          case 6: {
            this.selectRange[0] = 201
            this.selectRange[1] = this.rangeObj[7].value - 1
          } break

          case 7: {
            this.selectRange[0] = this.rangeObj[6].value + 1
            this.selectRange[1] = 2400
          } break
        }
        return '(' + this.selectRange[0] + '~' + this.selectRange[1] + ')'
      }
    },
    props: {
      index: {
        type: Number
      },
      rangeObj: {
        type: Array,
        twoWay: true
      }
    },
    ready () {
      this.Up = function () {
        let _value = this.rangeObj[this.index].value
        _value++
        if (_value > this.selectRange[1]) {
          _value = this.selectRange[1]
        }
        this.rangeObj[this.index].value = _value
      }

      this.Down = function () {
        let _value = this.rangeObj[this.index].value
        _value--
        if (_value < this.selectRange[0]) {
          _value = this.selectRange[0]
        }
        this.rangeObj[this.index].value = _value
      }
    }
  }
</script>

<style lang = "less">
  .option-range {
    border: 3px solid grey;
    background-color: white;
    width: 150px;
    position: relative;
    left: 180px;
    top: -105px;
  }

  .rangValue {
    background-color: black;
    color: white;
    width: 100px;
    position: relative;
    left: 25px;
  }
</style>
